<template>
  <div class="app">
    <div class="title">
      <!-- 顶部搜素部分 -->
      <div class="search">
        <div class="block">
          <el-select v-model="State" placeholder="请选择推荐类型">
            <el-option v-for="item in UserState" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <!--查找&添加 -->
        <div class="topinput">
          <el-button type="primary" icon="el-icon-search" class="searchlogo" @click="searchvalue">查找</el-button >
          <el-button type="primary" icon="el-icon-edit" class="addlogo" @click="showdialog">添加</el-button>
        </div>
      </div>
      <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="id" label="推荐ID" align="center" sortable ></el-table-column>
          <el-table-column prop="spuTitle" label="推荐商品" align="center"></el-table-column>
            <el-table-column label="推荐类型" align="center">
                <template slot-scope="scope">
                    <el-tag size="medium" > {{ scope.row.recommendType == 1?'橱窗推荐':'' }}</el-tag>
                </template>
            </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" class="editor" type="danger" @click="Delete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 创建 -->
        <el-dialog title="创建" :visible.sync="dialogFormVisible">
            <el-form :model="form"  :rules="rules" ref="form" >
                <el-form-item label="推荐类型" :label-width="formLabelWidth" prop="">
                        <el-select v-model="form.region" placeholder="请选择">
                           <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                </el-form-item>
                <el-form-item label="推荐商品" :label-width="formLabelWidth" prop="">
                    <el-cascader v-model="form.name" :options="option" :props="{ expandTrigger: 'hover' }"  placeholder="关联商品"></el-cascader>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addlist('form')">确 定</el-button>
            </div>
	    </el-dialog>
        <!-- 分页 -->
        <div class="paging">
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNo" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
        </div>
    </div>
  </div>
</template>
<script>
	import {
		roleList,
		handleDeletes,
		showdialog,
		addnews
	} from "../encapsulation/RecommendedManagement";
	export default {
		data() {
			//非空验证
			var validatePass = (rule, value, callback) => {
				if (value === "") {
					callback(new Error("角色名称不能为空"));
				} else {
					callback();
				}
			}
			return {
				value: [], //spu树
				option: [], //spu树
				dialogFormVisible: false, // dialog点击显示&隐藏
				form: {
					name: "",
					region: ""
				}, //dialog表单内容
				rules: {
					username: [{
						validator: validatePass,
						required: true,
					}, ],
					password: [{
						validator: validatePass,
						required: true,
					}],
				},
				formLabelWidth: "120px",
				pageNo: 1, // 默认页数
				pageSize: 20, // 页面条数
				total: 0, // 总共条数
				tableData: [], // 渲染的表格
				State: "", //请选择用户状态(搜素框输入的值)
				UserState: [{
						value: "橱窗推荐",
						label: "橱窗推荐"
					},
					{
						value: "全部",
						label: "全部"
					},
				],
				options: [{
					value: 1,
					label: '橱窗推荐'
				}, {
					value: null,
					label: '全部'
				}],
			};
		},
		methods: {
			//获取角色列表
			getlist() {
				let roleLister = {
					pageNo: this.pageNo,
					limit: this.pageSize,
				};
				roleList(roleLister).then((res) => {
					this.tableData = res.data.data.items;
				});
				//递归
				showdialog().then((res) => {
					let nums = res.data.data;
					function recursive(data) {
						data.forEach((item) => {
							if (item.children.length == 0) {
								delete item.children;
							} else {
								recursive(item.children);
							}
						});
					}
					recursive(nums);
					this.option = nums;
				});
			},
			// 点击显示添加弹框
			showdialog() {
				this.dialogFormVisible = true;
			},
			// 添加
			addlist(form) {
				this.$refs[form].validate((valid) => {
					if (valid) {
						let rowls = this.form.name.pop()
						let addrow = rowls.substring(2)
						let data = {
							spuId: addrow,
							recommendType: this.form.region,
						}
						addnews(data).then((res) => {
							if (res.data.errno == 200) {
								this.$message({
									message: "添加成功",
									type: "success",
								});
								this.getlist() //刷新
								this.dialogFormVisible = false
							}
						})
					} else {
						console.log("error submit!!");
						return false;
					}
				});
			},
			// 删除
			Delete(index, row) {
				let _this = this;
				let data = {
					id: row.id,
					recommendType: row.recommendType,
				};
				_this
					.$confirm(
						"此操作将永久删除该角色---" + row.id + "---, 是否继续?",
						"提示", {
							confirmButtonText: "确定",
							cancelButtonText: "取消",
							type: "warning",
						}
					)
					.then(() => {
						handleDeletes(data).then(() => {
							_this.tableData.splice(index, 1);
							this.$message({
								message: "删除成功",
								type: "success",
							});
						});
					})
					.catch(() => {
						this.$message("您已取消删除");
					});
			},
			//分页
			handleSizeChange(val) {
				this.pageSize = val;
				this.getlist();
			},
			handleCurrentChange(val) {
				this.pageNo = val;
				this.getlist();
			},
			// 查找
			searchvalue() {
				(this.pageNo = 1), (this.pageSize = 20), this.getlist();
			},
		},
		//创建后
		created() {
			this.getlist();
		},
	};
</script>
<style scoped lang="less">
.app{padding: 20px;height: 100%;overflow: hidden !important;position: relative;}
.title{ position: absolute;left: 0;top: 0;right: -17px;bottom: 0;overflow-x: hidden;overflow-y: scroll;padding: 20px;}
.search{display: flex;padding: 5px 0;align-items: center;}
.paging{padding: 10px 0;}
.paging/deep/.el-select{padding: 0 3px;}
.topinput{padding: 0 3px;}
.topinput/deep/.inputsame{padding: 0 3px;}
.el-table{font-size: 12px;}
</style>
